<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>年运活动</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="">
    <link rel="stylesheet" href="__STATIC__/fortuneyearactive2022/index.css?v=1">
</head>
<body>
<div class="content-box">
    <div class="nav" style="visibility:{$is_show_nav?'visible':'hidden'}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="to-back" onclick="commonJsToNative('local', 'back');">
                <div class="img"></div>
            </div>
        </div>
    </div>
    <div class="xz-tab">
        <div class="xz-tab-title">
            <div class="xz-tab-title-item active">年运升级</div>
            <div class="xz-tab-title-item">免费抽奖</div>
            <div class="xz-tab-title-item">开运好物</div>
        </div>
        <div class="xz-tab-content">
            <div class="xz-tab-item active">
                <img class="year-intro-img" src="https://oss.goddessxzns.com/active/fortune_year_2022/intro1.png?v=1">
                <img class="year-intro-img" src="https://oss.goddessxzns.com/active/fortune_year_2022/intro2.png?v=1">
            </div>
            <div class="xz-tab-item">
                <div class="lucky-draw-box">
                    {foreach $award_data as $awardItem}
                        <div class="prize-item" style="background-image: url('{$awardItem.img1}')"></div>
                    {/foreach}
                    <div class="prize-item prize-btn"></div>
                </div>
            </div>
            <div class="xz-tab-item">
                <div class="good-item good-item1">
                    <div class="good-item-box">
                        <div class="good-type1">
                            {foreach $good_data[1] as $k=> $goodItem}
                            {if condition="$k > 0"}
                                <div class="good-hr"></div>
                            {/if}
                                <img class="good-intro-img" src="{$goodItem['img']}" alt="">
                                <div class="good-btn target-link" data-toast="{$goodItem['toast']}"
                                     data-target="{$goodItem['target']}" data-link="{$goodItem['link']}"></div>
                                <p class="good-des">触发好运 能量加持</p>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="good-item good-item2">
                    <div class="good-item-box">
                        <div class="good-type2">
                            {foreach $good_data[2] as $k=> $goodItem}
                            {if condition="$k > 0"}
                                <div class="good-hr"></div>
                            {/if}
                                <div class="good-price"><span class="price-des">{$goodItem['item_title']}</span> <span
                                        class="price-text">限时<span
                                        class="price">{$goodItem['now_price']}</span>元</span> <span class="price-del">（原价{$goodItem['discount_price']}
                                    元）</span></div>
                                <div class="good-img-box">
                                    <img class="good-img-item good-img-item1" src="{$goodItem['img1']}" alt="">
                                    <img class="good-img-and"
                                         src="https://oss.goddessxzns.com/active/fortune_year_2022/good_and.png" alt="">
                                    <img class="good-img-item good-img-item2" src="{$goodItem['img2']}" alt="">
                                </div>
                                <div class="good-btn target-link" data-toast="{$goodItem['toast']}"
                                     data-target="{$goodItem['target']}" data-link="{$goodItem['link']}"></div>
                                <p class="good-des">触发好运 能量加持</p>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-box target-link" data-toast="" data-target="local"
         data-link="fortune_for_year?time=2023&need_auth=1"></div>
    <div class="cover-box" style="display: none">
        <div class="msg-box dt2"
             style="background-image: url('https://oss.goddessxzns.com/active/fortune_year_2022/alert-msg.png')">
            <div class="data-box data-type1">
                <p class="toast-title"></p>
                <p class="toast-msg"></p>
            </div>
            <div class="data-box data-type2">
                <img class="toast-coupon-img" src="https://oss.goddessxzns.com/active/fortune_year_2022/year_01_0.png"
                     alt="">
                <p class="toast-coupon-name"></p>
                <p class="toast-coupon-des"></p>
            </div>
            <div class="data-btn  target-link"
                 style="background-image: url('https://oss.goddessxzns.com/active/fortune_year_2022/toast_btn1.png')"></div>
        </div>
        <div class="close-btn"><img src="https://oss.goddessxzns.com/active/fortune_year_2022/close.png" alt=""></div>
    </div>
</div>
</body>
<script src="https://oss.goddessxzns.com/static/live/js/jquery-1.11.3.min.js"></script>
<script src="https://oss.goddessxzns.com/test/js/resLoader.js"></script>
<script type="text/javascript">
    var isNew;
    var appType = '{$app_type}';
    var header = JSON.parse('{$headers}');
    var isLogin = '{$is_login}' * 1;
    var awardNum = '{$award_num}' * 1, isAward = false;

    function init() {
        resizeWindow();
        // 获取本地新消息数据
        isNew = window.localStorage.getItem('new_data');
        isNew = isNew ? JSON.parse(isNew) : {0: 0, 1: 1, 2: 1};
        $.each(isNew, function (k, v) {
            if (v === 1) {
                $('.xz-tab-title-item').eq(k).addClass('new');
            }
        });
        if (awardNum > 0) {
            // 有抽奖机会
        } else {
            // 机会用尽
            isAward = true; // 没有抽奖机会
            // 抽奖按钮 机会用尽
            $('.lucky-draw-box .prize-item.prize-btn').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/btn2.png')"});
        }
        let defaultIndel = 0; // tab 初始展示
        selectTab(defaultIndel);
    }

    function selectTab(index) {
        $('.xz-tab-content .xz-tab-item').removeClass('active').eq(index).addClass('active');
        let This = $('.xz-tab-title-item').eq(index);
        This.addClass('active').siblings().removeClass('active');
        if (This.hasClass('new')) {
            This.removeClass('new');
        }
    }

    $(window).resize(function () {
        resizeWindow();
    })

    function resizeWindow() {
        if ($(window).width() >= 750) {
            $('html').css({'font-size': '32px'});
        } else {
            var remPx = 100 / 7.5;
            $('html').css({'font-size': remPx + 'vw'});
        }
    }

    function toast1(msg, target, link) {
        $('.cover-box .msg-box').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/alert-msg.png')"}).addClass('dt1').removeClass('dt2');
        $('.cover-box .msg-box .toast-title').text('温馨提示');
        $('.cover-box .msg-box .toast-msg').text(msg);
        let btn = $('.cover-box .msg-box .data-btn');
        btn.css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/toast_btn1.png')"});
        btn.data('target', target);
        btn.data('link', link);
        $('html').css({"height": "100vh", overflow: "hidden"})
        $('.cover-box').show();
    }

    function toast2(couponImg, couponName, couponDes, target, link) {
        $('.cover-box .msg-box').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/alert-prize.png')"}).addClass('dt2').removeClass('dt1');
        $('.cover-box .msg-box .toast-coupon-img').attr('src', couponImg);
        $('.cover-box .msg-box .toast-coupon-name').text(couponName);
        $('.cover-box .msg-box .toast-coupon-des').text(couponDes);
        let btn = $('.cover-box .msg-box .data-btn');
        btn.css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/toast_btn2.png')"});
        btn.data('target', target);
        btn.data('link', link);
        $('html').css({"height": "100vh", overflow: "hidden"})
        $('.cover-box').show();
    }

    $(function () {
        var index = 7, speed = 400, maxSpeed = 100, minSpeed = 500, fast = 4, slow = 0.6,
                awardBox = $('.lucky-draw-box .prize-item');
        var awardData = JSON.parse('{$award_data|json_encode}');
        var lastAward = {index: 0, url: ''}, resultAward = {status: 0};
        init();

        $('.xz-tab-title-item').click(function () {
            if ($(this).hasClass('active')) {
                return;
            }
            let index = $(this).index();
            selectTab(index);
            if (isNew[index] === 1) { // 有新消息
                isNew[index] = 0;
                window.localStorage.setItem('new_data', JSON.stringify(isNew));
            }
        });

        $('.cover-box .close-btn').click(function () {
            $(this).parents('.cover-box').hide().find('.msg-box').removeClass('dt2').removeClass('dt1');
            $('html').css({"height": "unset", overflow: "unset"})
        });

        $('.target-link').click(function () {
            let This = $(this);
            let toast = This.data('toast');
            let target = This.data('target');
            let link = This.data('link');
            if (toast) {
                // toast 后再跳转
                toast1(toast, target, link);
            } else {
                // 跳转
                commonJsToNative(target, link);
                $('.cover-box').hide().find('.msg-box').removeClass('dt2').removeClass('dt1');
                $('html').css({"height": "unset", overflow: "unset"})
            }
        });

        $('.prize-btn').click(function () {
            if (isLogin < 1) {
                commonJsToNativeLoginAndReloadWebView();
                return;
            }
            if (awardNum < 1) {
                commonJsToNative('toast', '已完成抽奖，机会用尽，请到卡券中心查看。');
                return;
            }
            if (isAward) {
                return;
            }
            isAward = true;
            $.each(awardData, function (k, v) {
                awardBox.eq(k).css({"background-image": "url('" + v['img1'] + "')"});
            })
            run();
            $.ajax({
                url: '/api/v36/fortune_year_2022active/get_award',
                type: 'get',
                timeout: 5000,// 5秒超时
                dataType: 'json',
                headers: header,
                success: function (res) {
                    if (res.code == 200) {
                        resultAward = {
                            status: 1,
                            img: res.data.img,
                            index: res.data.index,
                            cname: res.data.cname,
                            target: res.data.target,
                            link: res.data.link,
                        };
                    } else {
                        resultAward = {status: 2,}
                        commonJsToNative('toast', res.msg);
                    }
                }
            })
        });

        /**
         * 抽奖效果
         */
        function run() {
            index++
            let curIndex = index % awardData.length;
            if (lastAward.url) {
                awardBox.eq(lastAward.index).css({"background-image": "url('" + lastAward.url + "')"});
            } else {
                $('.lucky-draw-box .prize-item.prize-btn').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/btn3.png')"})
            }
            awardBox.eq(curIndex).css({"background-image": "url('" + awardData[curIndex]['img2'] + "')"});
            if (index >= awardData.length * fast) {
                if (resultAward.status) {
                    // 持续减速 已中奖情况 才会开始减速
                    speed += 35;
                }
            } else {
                // 持续加速
                speed -= 35;
            }
            // 最大最小速度限制
            if (speed > minSpeed) {
                speed = minSpeed;
            } else if (speed < maxSpeed) {
                speed = maxSpeed;
            }
            if (index >= awardData.length * (fast + slow) && resultAward.status === 1 && curIndex === resultAward.index) {    // 已中奖情况 并且当前状态正常
                index = 7;
                lastAward = {index: 0, url: ''};
                // 延迟350毫秒展示中奖结果
                setTimeout(function () {
                    // 展示中奖信息
                    toast2(resultAward.img, resultAward.cname, '卡券已发放到您的卡券中心，请尽快使用', resultAward.target, resultAward.link);
                    awardNum--;
                    if (awardNum < 1) {
                        // 抽奖按钮 机会用尽
                        $('.lucky-draw-box .prize-item.prize-btn').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/btn2.png')"});
                        // 不可抽奖
                        isAward = true;
                    } else {
                        // 还有抽奖机会
                        $('.lucky-draw-box .prize-item.prize-btn').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/btn1.png')"});
                        // 还可抽奖
                        isAward = false;
                    }
                    // 奖品信息清除
                    resultAward = {status: false};
                }, 350)
            } else if (resultAward.status === 2) {    // 服务异常,抽奖机会保留
                index = 7;
                // 还有抽奖机会
                $('.lucky-draw-box .prize-item.prize-btn').css({"background-image": "url('https://oss.goddessxzns.com/active/fortune_year_2022/btn1.png')"});
                // 还可抽奖
                isAward = false;
            } else {
                // 自调用
                lastAward = {
                    index: curIndex,
                    url: awardData[curIndex]['img1']
                }
                setTimeout(run, speed)
            }
        }

        // 预加载 图片资源
        let loader = new resLoader({
            resources: [
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_01_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_01_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_01_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_81_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_81_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_81_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_03_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_03_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_03_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_91_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_91_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_91_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_51_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_51_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_51_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/month_01_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/month_01_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/month_01_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_05_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_05_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_05_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_71_0.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_71_1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/year_71_2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/good_intro_year.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/good_intro_month.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/btn1.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/btn2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/btn3.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/close.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/good_and.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/alert-msg.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/alert-prize.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/toast_btn2.png',
                'https://oss.goddessxzns.com/active/fortune_year_2022/toast_btn1.png',
            ],
            onStart: function (total) {
            },
            onProgress: function (current, total) {
            },
            onComplete: function (total) {
            }
        });
        loader.start();
    })
</script>
<script src="__STATIC__/common.js"></script>
</html>